<template>
    <!-- <bear-content ref="contBox"> -->
        <div class="box_cont topic_cont" ref="boxfull" v-loading="loading">
            <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none;"></audio>
            <h5>21天抗遗忘</h5>
            <div class="work_cont">
                <div class=" flex_center_center" v-if="words.length > 0">
                    <div class="item flex_center_between cur" v-for="(item, index) in words" :key="index" v-loading="collectLoading[index] || false">
                        <p @click="playAudio(index, item)">
                            <span style="font-size: 2.5rem;">{{ index + 1 }}.</span> {{ item.word }}
                            <span v-if="translationShow[index] == 2">{{ item.translation }}</span>
                        </p>
                        <img src="@/assets/img/collect_1.png" v-if="item.collect && item.collect.status == 1"  @click="cancelCollect(index, item)"/>
                        <img src="@/assets/img/collect.png" v-if="!item.collect || item.collect.status == 0" @click="collect(index, item)"/>
                    </div>
                </div>
                <template v-else>
                    <empty type="1" text="暂无抗遗忘"></empty>
                </template>
            </div>
            <el-button
                id="fullscreen_button"
                style="width: 208px; margin: 20px 0"
                type="primary"
                @click="endReview"
                >结束复习
            </el-button>
        </div>
<!-- </bear-content> -->
</template>

<script>

import bearContent from '@/views/components/bear_content.vue'
import { reviewCycleDetail, reviewChangeStatus } from '@/api/reviewCycle.js'
import { collect, cancelCollectByVocabularyId } from '@/api/vocabulary.js'

export default {
    components: { bearContent },
    props: {
        bearRef: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            loading: false,
            collectLoading: [],
            words: [],
            infoId: '',
            info: null,
            userId: '',
            voiceUrl: '',
            wordPlayStatus: [],
            translationShow: [],
            currentPlayIndex: 0
        }
    },

    mounted () {
        this.infoId = this.$route.query.id
        this.userId = this.$route.query.userId
        this.initData()
    },
    methods: {
        initData () {
            this.loading = true
            this.getInfo()
        },
        getInfo () {
            reviewCycleDetail({
                id: this.infoId,
                userId: this.userId
            }).then(res => {
                this.loading = false
                this.info = res.data
                this.words = res.data.words
            })
        },
        // 收藏
        collect (index, row) {
            if (this.collectLoading[index]) return
            this.collectLoading = []
            this.collectLoading[index] = true

            collect({
                vocabularyId: row.id,
                userId: this.userId
            }).then(res => {
                this.collectLoading[index] = false
                if (res.error == 0) {
                    this.$message.success({ el: this.bearRef.$el, message: '收藏成功' })
                    setTimeout(this.getInfo(), 500)
                }
            })
            .finally(() => this.collectLoading[index] = false)
            .catch(() => this.collectLoading[index] = false)
        },
        // 取消收藏
        cancelCollect (index, row) {
            if (this.collectLoading[index]) return
            this.collectLoading = []
            this.collectLoading[index] = true

            cancelCollectByVocabularyId({
                courseVocabularyId: row.id,
                userId: this.userId
            }).then(res => {
                this.collectLoading[index] = false
                if (res.error == 0) {
                    this.$message.success({ el: this.bearRef.$el, message: '取消收藏成功' })
                    setTimeout(this.getInfo(), 500)
                }
            }).catch(() => this.collectLoading[index] = false)
        },
        playAudio (index, word) {
            this.wordPlayStatus = []
            if (this.currentPlayIndex != index) this.translationShow = []
            this.currentPlayIndex = index
            this.translationShow[index] = !this.translationShow[index] || this.translationShow[index] == 3 ? 1 : this.translationShow[index] + 1
            if (word.voiceFile) {
                this.voiceUrl = word.voiceFile
                this.$nextTick(() => {
                    this.$refs.audio.play()
                    this.wordPlayStatus[index] = true
                })

                if (this.translationShow[index] == 3) this.translationShow[index] = 0
                this.$forceUpdate()
            }
        },
        playEnd () {
            this.wordPlayStatus = []
        },
        //结束复习
        endReview () {
            if (this.info && this.info.status && this.info.status.value == 1) {
                this.$router.push('/index')
                return
            }
            this.loading = true
            reviewChangeStatus({
                id: this.infoId,
            }).then(res => {
                this.$router.push('/index')
            }).finally(() => this.loading = false)
        }

    }
}
</script>

<style lang="scss" scoped>

.po{
    width: 0;
    height: 0;
}
.topic_cont{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    // padding: 20px 0;
    h5{
        font-size: 3.2rem;
        color: #1A1A1A;
        font-weight: normal;
        padding: 2rem 0;
    }
}
.work_cont{
    width: 100%;
    flex: 1;
    // height: 80%;
    overflow-y: scroll;
    box-sizing: border-box;
    // margin-top: 20px;
    // padding: 20px;
    border-bottom: 2px solid #F7F8FA;
    .item{
        width: 60%;
        height: 9rem;
        text-align: center;
        line-height: 9rem;
        padding: 0 4.5rem;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 3.2rem;
        color: #1A1A1A;
        background: #F7F8FA;
        p{
            font-size: 3.6rem;
            font-weight: 600;
            letter-spacing: 0em;
        }
        img{
            width: 3.2rem;
            height: 3.2rem;
            margin: auto 0;
            &:hover{
                content: url(@/assets/img/collect_2.png) !important;
            }
        }
        &:hover{
            background: #F69B2C;
            color:#FFF;
        //     img{
        //         content: url(@/assets/img/collect_2.png);
        //     }
        }
    }
    .status{
        background: #F69B2C;
        color: #fff;
    }

    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track {
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }
}
</style>
